<template>
  <div class="bg-[#1a2c38] w-full min-375 h-auto" id="targetElement">
    <div class="flex w-full bg-[#213743] items-center mb-4">
      <div
        class="max-w-[1200px] px-4 xl:px-0 w-full m-auto flex justify-between items-center h-[60px] xl:h-[115px]"
      >
        <h1 class="text-[1rem] xl:text-[1.6rem] font-bold text-white">
          {{ tabsName }}
        </h1>

        <div class="relative">
          <!-- <div
            v-if="business_code.length"
            class="absolute right-4 top-10 text-4xl"
            @click="business_code = ''"
          >
            ×
          </div> -->
          <img
            class="w-[12rem] xl:w-[24rem]"
            src="../../assets/gams/group-banner-default.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="container w-full mt-4">
      <Search class="mt-4" />

      <!-- 供应商模块 -->
      <div class="text-[#fff]">
        <supplierData
          @updatadSupplier="changeShowsupplier"
          ref="supplierDatas"
        />
      </div>
      <!-- 默认大厅游戏 -->
      <gameBox :games="games" />
      <p class="text-[#b1bad3] text-center">
        {{
          $t("page.casino.showtext1") +
          showtotal +
          $t("page.casino.showtext2") +
          games.length +
          $t("page.casino.showtext3")
        }}
      </p>
      <div
        v-if="showNextPage"
        @click="nextPage"
        class="w-[120px] m-auto mt-2 text-center bg-[#2f4553] text-white hover:bg-[#557086] px-4 py-2 rounded cursor-pointer"
      >
        {{ $t("page.casino.more") }}
      </div>
    </div>
  </div>
</template>

<script setup name="Tools">
import {
  watch,
  createApp,
  ref,
  computed,
  onMounted,
  onActivated,
  onBeforeUnmount,
  nextTick,
  getCurrentInstance,
  defineAsyncComponent,
  onUnmounted
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { NoticeBar } from "vant";
import { gameList } from "../../api/casion.js";
import { mainNav } from "@/store/nav";
import { mainAct } from "../../store/activeda";
import { eventBus } from "@/utils/eventBus.js";

const gameBox = defineAsyncComponent(() =>
  import("../../components/gameSwiper/gameBox.vue")
);
const supplierData = defineAsyncComponent(() =>
  import("../../components/supplierData/index.vue")
);

const main = mainNav();
const main2 = mainAct();
const router = useRouter();
const route = useRoute();
import more from "@/components/more/index.vue";
const Search = defineAsyncComponent(() =>
  import("@/components/search/index.vue")
);

const {
  appContext: {
    config: { globalProperties }
  }
} = getCurrentInstance();

const games = ref([]);
const tabs = ref([]);
const hallGames = ref([]);
const tabsName = ref("");
const tabsIcon = ref(null);

const carouselRef = ref(null);
const showAll = ref(false);
const currentId = ref(null);
const currentPage = ref(1);
const showtotal = ref(null);
const showNextPage = ref(false);

onMounted(() => {
  currentId.value = sessionStorage.getItem("changeActiveTabId");
  if (currentId.value) {
    setTimeout(() => {
      currentPage.value = 1;
      getGameListData();
    }, 200);
  } else {
    router.push("casino");
  }
});
//点击tabs
const nextPage = async () => {
  currentPage.value += 1;
  getGameListData();
};

const showLoading = ref(false); // 是否显示右侧的tab切换按钮
const supplierOption = ref([]);
const valShowsupplier = ref([]);
const supplierDatas = ref(null);
eventBus.off();
eventBus.on("changeActiveTab", val => {
  currentId.value = val;
  if (val != "all") {
    nextTick(() => {
      supplierDatas.value?.clearElect();
      currentPage.value = 1;
      getGameListData();
    });
    valShowsupplier.value = [];
    games.value = [];
    sessionStorage.setItem("changeActiveTabId", val);
    // main2.activeTab = val;
  }
});

const changeShowsupplier = val => {
  valShowsupplier.value = val;
  games.value = [];
  getGameListData();
};

const getGameListData = () => {
  showLoading.value = true;
  let data = {
    category_id: currentId.value,
    page_size: 28,
    page: currentPage.value,
    business_code: valShowsupplier.value
  };
  gameList(data).then(res => {
    showLoading.value = false;
    console.log(res);
    if (res.data.list) {
      showtotal.value = res.data.total;
      if (res.data.total > res.data.page * res.data.page_size) {
        showNextPage.value = true;
      } else {
        showNextPage.value = false;
      }
      res.data.list.forEach(item => {
        if (!item.img_url.startsWith("http")) {
          item.img_url = main2.static_base_url + item.img_url;
        }
      });
      games.value.push(...res.data.list);
    }
    // 当中间没有找到对应的菜单name时，就找左侧的菜单
    if (main2.gameNav?.length) {
      let menuObj = main2.gameNav?.find(rows => rows.id == currentId.value);
      if (menuObj) {
        tabsName.value = menuObj.name;
      }
    }
  });
};
</script>
<style scoped lang="less">
.my-swipe {
  width: 80vw;
  margin: auto;
  margin-bottom: 2rem;
}

.bgImg {
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.greenpoint {
  animation: svelte-tgp09d-pulse 1s infinite ease-out;
}
@keyframes svelte-tgp09d-pulse {
  0% {
    box-shadow: 0 0 #00e70166;
  }
  30% {
    box-shadow: 0 0 2px 2px #00e70166;
  }
  70% {
    box-shadow: 0 0 2px 2px #00e70166;
  }
  100% {
    box-shadow: 0 0 #00e70166;
  }
}
.nav-item {
  // color: #b1bad3;
  padding: 10px 20px;
  cursor: pointer;
  white-space: nowrap;
}

.nav-item:hover {
  background-color: #2f4553;
  border-radius: 20px;
}

.nav-item.active {
  background-color: #2f4553;
  border-radius: 20px;
}

.container {
  overflow: hidden;
}

@media screen and (min-width: 600px) and (max-width: 800px) {
  .swiper_height {
    height: 170px !important;
  }
  ::v-deep(.el-carousel__container) {
    height: 170px;
  }
}
@media screen and (min-width: 800px) and (max-width: 1000px) {
  .swiper_height {
    height: 220px !important;
  }
  ::v-deep(.el-carousel__container) {
    height: 220px;
  }
}
@media screen and (min-width: 1000px) and (max-width: 1200px) {
  .swiper_height {
    height: 230px !important;
  }
  ::v-deep(.el-carousel__container) {
    height: 230px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1400px) {
  .swiper_height {
    height: 290px !important;
  }
  ::v-deep(.el-carousel__container) {
    height: 290px;
  }
}
@media (max-width: 600px) {
  .swiper_height {
    height: 150px !important;
  }

  ::v-deep(.el-carousel__container) {
    height: 150px;
  }

  .game-card {
    width: 30% !important;
    max-width: unset;
  }

  .banner {
    height: 80px !important;
    line-height: 80px !important;
  }

  .gameBox {
    grid-gap: 10px 5px !important;
    grid-template-columns: repeat(3, 1fr) !important;

    .item {
      width: 28vw !important;
      max-width: unset;
      min-width: unset;
    }
    .game_loading_div {
      width: 28vw !important;
      height: 36vw !important;
    }
    .star {
      display: block !important;
    }
    .mb {
      opacity: 1 !important;
    }
  }
}

.game-card:hover {
  transform: translateY(-4%);
}

.game-card {
  max-width: 200px;
  width: 200px;
  height: 250px;
  cursor: pointer;
  background-color: #667386;
  border-radius: 10px;
  /* padding: 20px; */
  text-align: center;
  margin: 10px;
  /* flex: 1 0 21%; Adjust the flex-basis to control the number of items per row */
  position: relative;
  will-change: transform;
  transition: 0.3s;

  .game-card-con {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    img {
      width: auto;
      min-width: 200px;
      border-radius: 10px;
    }

    p {
      margin-top: 10px;
      color: #ffffff;
    }

    .players {
      color: #00ff00;
    }
  }
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination button {
  background-color: #1c2a38;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  padding-top: 15px;
  margin: 0 5px;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #2f4453;
}

.pagination button:first-child {
  margin-right: 0;
  border-radius: 40% 0 0 40%;
  border-right: 0;
}

.pagination button:last-child {
  margin-left: 0;
  border-radius: 0 40% 40% 0;
}

.pagination button.disabled {
  background-color: #1a2c38;
  color: #667386;
  cursor: not-allowed;
}

.banner {
  color: #fff;
  font-weight: 600;
  font-size: 20px;
  height: 115px;
  line-height: 115px;
}

.menu-hover-img {
  width: 20px;
}

.menu-hover-img:hover {
  filter: brightness(200%); /* 增加亮度来实现高亮效果 */
  transition: filter 0.1s ease; /* 平滑过渡效果 */
}

.menu-hover-img_hover {
  filter: brightness(200%); /* 增加亮度来实现高亮效果 */
  transition: filter 0.1s ease; /* 平滑过渡效果 */
}

:deep(.el-select__wrapper) {
  background: #0f212e;
}
</style>
